// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.

@use 'utils/mixins';

.url-input-main {
    display: flex;
    flex-direction: column;

    .url-input-container {
        display: flex;
        min-height: 32px;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 4px;

        .url-input-label {
            max-width: 100%;
            flex: none;
            margin-right: 4px;
            color: rgba(var(--center-channel-color-rgb), 0.75);
            font-size: 12px;
            line-height: 17px;
            overflow-wrap: anywhere;
        }

        .url-input-editable-container {
            width: auto;
            margin-right: 6px;

            .url-input-editable-wrapper {
                padding: 0 12px;

                .url-input-editable-path {
                    height: 26px;
                    border: 0;
                    border-radius: 0;
                    font-size: 12px;
                    line-height: 16px;
                }
            }
        }

        .url-input-button {
            @include mixins.link;

            padding: 0;
            border: none;
            background: var(--center-channel-bg);
            box-shadow: none;

            .url-input-button-label {
                line-height: 9px;
            }
        }
    }

    .url-input-error {
        display: flex;
        margin-top: 5px;
        color: var(--error-text);
        font-size: 12px;
        line-height: 16px;
        text-align: left;

        i {
            height: 14px;
            align-self: baseline;
            margin-right: 7px;
            font-size: 14px;

            &::before {
                margin: 0;
            }
        }
    }
}
